
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="com.iqoo.store.model.Product" %>
<%@ page import="com.iqoo.store.dao.ProductDao" %>
<%@ page import="com.iqoo.store.model.User" %>
<%
    ProductDao productDao = new ProductDao();
    int featuredLimit = 10;
    List<Product> featuredProducts = productDao.getFeaturedProducts(featuredLimit);
    User user = (User) session.getAttribute("user");
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>iQOO的小店</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 汉堡菜单样式 */
        .hamburger {
            display: none;
            cursor: pointer;
            padding: 10px;
        }

        .hamburger-line {
            width: 25px;
            height: 3px;
            background-color: #fff;
            margin: 5px 0;
            transition: all 0.3s ease;
            right: 0;
        }

        /* 响应式样式 */
        @media (max-width: 768px) {
            /* 调整页面内容，避免被导航栏遮挡 */
            .content {
                margin-top: 60px; /* 值需 ≥ 导航栏高度 */
            }
            .hamburger {
                display: block;
                position: absolute;   /* 绝对定位 */
                right: 15px;          /* 距离右侧 15px */
            }

            .navbar-right {
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #333;
                flex-direction: column;
                padding: 10px 0;
                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                z-index: 1000;    /* 确保层级高于其他元素 */
            }

            .navbar-right.active {
                display: flex;
            }

            .navbar-right a, .navbar-right span {
                padding: 10px 20px;
                border-bottom: 1px solid #333;
            }
        }

    </style>
</head>
<body>
<!-- 顶栏 -->
<div class="navbar">
    <div class="navbar-left">
        <a href="index.jsp" class="logo">iQOO的小店</a>
    </div>
    <div class="navbar-right" id="navbarRight">
        <% if (user == null) { %>
        <a href="index.jsp">主页</a>
        <a href="register.jsp">注册</a>
        <a href="login.jsp">登录</a>
        <% } else { %>
        <span>欢迎, <%= user.getUsername() %>!</span>
        <% if(user.getRole() == 1) { %>
        <% } %>
        <a href="index.jsp">主页</a>
        <a href="goods.jsp">商品列表</a>
        <a href="cart.jsp">购物车</a>
        <% } %>
    </div>
    <div class="hamburger" onclick="toggleMenu()">
        <div class="hamburger-line"></div>
        <div class="hamburger-line"></div>
        <div class="hamburger-line"></div>
    </div>
</div>

<!-- 主页内容 -->
<div class="container">
    <!-- 手机推荐 -->
    <div class="featured-products">
        <h2>推荐手机</h2>
        <div class="products">
            <% for(Product product : featuredProducts) { %>
            <div class="product">
                <img src="<%= product.getImageUrl() != null ? product.getImageUrl() : "default.jpg" %>" alt="<%= product.getName() %>">
                <h3><%= product.getName() %></h3>
                <p>价格: ¥<%= product.getPrice() %></p>
                <p><%= product.getDescription() %></p>
                <div class="product-actions">
                    <a href="product_detail.jsp?id=<%= product.getId() %>">查看详情</a>
                    <form action="addToCart" method="post" style="display:inline;">
                        <input type="hidden" name="product_id" value="<%= product.getId() %>">
                        <button type="submit">加入购物车</button>
                    </form>
                </div>
            </div>
            <% } %>
        </div>
    </div>

    <!-- 手机商品列表链接 -->
    <div class="all-products-link">
        <a href="goods.jsp">查看所有手机商品</a>
    </div>
</div>

<script>
    function toggleMenu() {
        const navbarRight = document.getElementById('navbarRight');
        navbarRight.classList.toggle('active');
    }
</script>
</body>
</html>
